<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Crafty - Collision</title>
	<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />

	<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' 	type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="/favicon.ico">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="/github.css"/>
	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-23935213-2']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

	</script>
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="/">Home</a></li>
						<li><a href="/getting-started/">Getting started</a></li>
						<li><a href="/documentation/">Documentation</a></li>
						<li><a href="/api/">API</a></li>
						<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
						<li><a href="/components/">Components</a></li>
						<li class="emph"><a href="/#install">Download</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Controls<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Collision <span class="page-badge">Component</span></h1><div class="doclet" id="Collision"><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L171-L192">src/spatial/collision.js#L171-L192</a></div><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>HitOn <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { hitData }</span></span>]</span></dt><dd>Triggered when collisions occur. Will not trigger again until collisions of this type cease, or an event is requested once more (using `resetHitChecks(component)`).</dd></dl><dl class="trigger"><dt>HitOff <span>[<span class="trigger-data"><span class="obj-name">componentName</span><span class="obj-props"> = {String}</span></span>]</span></dt><dd>Triggered when collision with a specific component type ceases</dd></dl></div></div><span class="markdown"><p>Component to detect collision between any two convex polygons.</p>
<p>If collision checks are registered for multiple component and collisions with
multiple types occur simultaniously, each collision will cause an individual
event to fire.</p>
</span><div class="note"><span class="markdown"><p><strong>Note:</strong> All data received from events is only valid for the duration of the event&#39;s callback. If you wish to preserve the data, make a copy of it.</p>
</span></div><span class="markdown"><p>For a description of collision event data (hitData above), see the documentation for
<code>.hit()</code>.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="2D.html">2D</a></li></ul></div></div><div><h4>Methods</h4><ul class="page-toc"><li><a href="#-cbr">.cbr()</a></li><li><a href="#-checkHits">.checkHits()</a></li><li><a href="#-collision">.collision()</a></li><li><a href="#-hit">.hit()</a></li><li><a href="#-ignoreHits">.ignoreHits()</a></li><li><a href="#-onHit">.onHit()</a></li><li><a href="#-resetHitChecks">.resetHitChecks()</a></li></ul><div class="doclet" id="-cbr"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.cbr()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L300-L317">src/spatial/collision.js#L300-L317</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Object </span><span class="sig-noun">.cbr</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">cbr</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> cbr </dt><dd><span class="markdown"><p>an object to use as output</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>an object with <code>_x</code>, <code>_y</code>, <code>_w</code>, and <code>_h</code> properties; if an object is passed in, it will be reused rather than creating a new object.</p>
</span></dd></dl></div><span class="markdown"><p>Return an object containing a copy of this entity&#39;s collision bounding rectangle.
The CBR encompasses both the entity&#39;s custom collision hitbox and its MBR.
If the custom collision hitbox does not sit outside the entity it will return the entity&#39;s minimum bounding rectangle (<code>.mbr()</code>) instead.</p>
</span><div class="note"><span class="markdown"><p><strong>Note:</strong> The keys have an underscore prefix. This is due to the x, y, w, h properties being setters and getters that wrap the underlying properties with an underscore (_x, _y, _w, _h).</p>
</span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="2D.html#-mbr">2D.mbr</a></li></ul></div></div><div class="doclet" id="-checkHits"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.checkHits()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L620-L664">src/spatial/collision.js#L620-L664</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.checkHits</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">componentList</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> componentList </dt><dd><span class="markdown"><p>A comma seperated list of components to check for collisions with.</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.checkHits</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">component1</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">..</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String </span><span class="sig-noun">componentN</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> component# </dt><dd><span class="markdown"><p>A component to check for collisions with.</p>
</span></dd></dl></div><span class="markdown"><p>Performs collision checks against all entities that have at least one of
the components specified when calling this method. If collisions occur,
a &quot;HitOn&quot; event containing the collision information will be fired for the
entity on which this method was invoked. See the documentation for <code>.hit()</code>
for a description of collision data contained in the event.
When a collision that was reported ends, a corresponding &quot;HitOff&quot; event
will be fired.</p>
<p>Calling this method more than once for the same component type will not
cause redundant hit checks.</p>
<p>If you want more fine-grained control consider using <code>.hit()</code> or even <code>Crafty.map.search()</code>.</p>
</span><div class="note"><span class="markdown"><p><strong>Note:</strong> Hit checks are performed upon entering each new frame (using the <em>EnterFrame</em> event). It is entirely possible for object to move in said frame after the checks were performed (even if the more is the result of <em>EnterFrame</em>, as handlers run in no particular order). In such a case, the hit events will not fire until the next check is performed in the following frame.</p>
</span></div><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs ">Crafty.e(<span class="hljs-string">"2D, Collision"</span>)
    .checkHits(<span class="hljs-string">'Solid'</span>) <span class="hljs-comment">// check for collisions with entities that have the Solid component in each frame</span>
    .bind(<span class="hljs-string">"HitOn"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hitData</span>) </span>{
        Crafty.log(<span class="hljs-string">"Collision with Solid entity occurred for the first time."</span>);
    })
    .bind(<span class="hljs-string">"HitOff"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">comp</span>) </span>{
        Crafty.log(<span class="hljs-string">"Collision with Solid entity ended."</span>);
    });</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-hit">.hit</a></li><li><a href="Crafty-map.html#Crafty-map-search">Crafty.map.search</a></li></ul></div></div><div class="doclet" id="-collision"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.collision()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L208-L248">src/spatial/collision.js#L208-L248</a></div><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>NewHitbox <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Crafty.polygon}</span></span>]</span></dt><dd>when a new hitbox is assigned</dd></dl></div></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.collision</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Crafty.polygon </span><span class="sig-noun">polygon</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> polygon </dt><dd><span class="markdown"><p>Optional Crafty.polygon object that will act as the hit area.</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.collision</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Array </span><span class="sig-noun">coordinatePairs</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> coordinatePairs </dt><dd><span class="markdown"><p>Optional array of x, y coordinate pairs to generate a hit area polygon.</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.collision</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-noun">x1</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">y1</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-noun">..</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">xN</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">yN</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> point# </dt><dd><span class="markdown"><p>Optional list of x, y coordinate pairs to generate a hit area polygon.</p>
</span></dd></dl></div><span class="markdown"><p>Constructor that takes a polygon, an array of points or a list of points to use as the hit area,
with points being relative to the object&#39;s position in its unrotated state.</p>
<p>The hit area must be a convex shape and not concave for collision detection to work properly.</p>
<p>If no parameter is passed, the x, y, w, h properties of the entity will be used, and the hitbox will be resized when the entity is.</p>
<p>If a hitbox is set that is outside of the bounds of the entity itself, there will be a small performance penalty as it is tracked separately.</p>
<p>In order for your custom hitbox to have any effect, you have to add the <code>Collision</code> component to all other entities this entity needs to collide with using this custom hitbox.
On the contrary the collisions will be resolved using the default hitbox. See <code>.hit()</code> - <code>MBR</code> represents default hitbox collision, <code>SAT</code> represents custom hitbox collision.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs ">Crafty.e(<span class="hljs-string">"2D, Collision"</span>).collision(
    <span class="hljs-keyword">new</span> Crafty.polygon([<span class="hljs-number">50</span>, <span class="hljs-number">0</span>,  <span class="hljs-number">100</span>, <span class="hljs-number">100</span>,  <span class="hljs-number">0</span>, <span class="hljs-number">100</span>])
);

Crafty.e(<span class="hljs-string">"2D, Collision"</span>).collision([<span class="hljs-number">50</span>, <span class="hljs-number">0</span>,  <span class="hljs-number">100</span>, <span class="hljs-number">100</span>,  <span class="hljs-number">0</span>, <span class="hljs-number">100</span>]);

Crafty.e(<span class="hljs-string">"2D, Collision"</span>).collision(<span class="hljs-number">50</span>, <span class="hljs-number">0</span>,  <span class="hljs-number">100</span>, <span class="hljs-number">100</span>,  <span class="hljs-number">0</span>, <span class="hljs-number">100</span>);</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Crafty-polygon.html">Crafty.polygon</a></li></ul></div></div><div class="doclet" id="-hit"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.hit()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L425-L487">src/spatial/collision.js#L425-L487</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Array </span><span class="sig-noun">.hit</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">component</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> component </dt><dd><span class="markdown"><p>Check collision with entities that have this component applied to them.</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p><code>null</code> if there is no collision. If a collision is detected, returns an Array of collision data objects (see below).</p>
</span></dd></dl></div><span class="markdown"><p>Tests for collisions with entities that have the specified component
applied to them.
If a collision is detected, data regarding the collision will be present in
the array returned by this method.
If no collisions occur, this method returns <code>null</code>.</p>
<p>Following is a description of a collision data object that this method may
return: The returned collision data will be an Array of Objects with the
type of collision used, the object collided and if the type used was SAT (a polygon was used as the hitbox) then an amount of overlap.</p>
<pre><code class="hljs ">[{
   <span class="hljs-attr">obj</span>: [entity],
   <span class="hljs-attr">type</span>: [<span class="hljs-string">"MBR"</span> or <span class="hljs-string">"SAT"</span>],
   <span class="hljs-attr">overlap</span>: [number]
}]</code></pre><ul>
<li><strong>obj:</strong> The entity with which the collision occured.</li>
<li><strong>type:</strong> Collision detection method used. One of:<ul>
<li><em>MBR:</em> Standard axis aligned rectangle intersection (<code>.intersect</code> in the 2D component).</li>
<li><em>SAT:</em> Collision between any two convex polygons. Used when both colliding entities have the <code>Collision</code> component applied to them.</li>
</ul>
</li>
<li><strong>overlap:</strong> If SAT collision was used, this will signify the overlap percentage between the colliding entities.</li>
</ul>
<p>Keep in mind that both entities need to have the <code>Collision</code> component, if you want to check for <code>SAT</code> (custom hitbox) collisions between them.</p>
<p>If you want more fine-grained control consider using <code>Crafty.map.search()</code>.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><p>Resolving collisions with static colliders (walls) for moving entity (player).</p>
<pre><code class="hljs ">Crafty.e(<span class="hljs-string">"2D, Fourway, Collision, player"</span>)
      .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">32</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">32</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">32</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">32</span>})
      .collision([<span class="hljs-number">0</span>, <span class="hljs-number">16</span>, <span class="hljs-number">16</span>, <span class="hljs-number">0</span>, <span class="hljs-number">32</span>, <span class="hljs-number">16</span>, <span class="hljs-number">16</span>, <span class="hljs-number">32</span>])
      .fourway()
      .bind(<span class="hljs-string">'Moved'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">evt</span>) </span>{ <span class="hljs-comment">// after player moved</span>
        <span class="hljs-keyword">var</span> hitDatas, hitData;
        <span class="hljs-keyword">if</span> ((hitDatas = <span class="hljs-keyword">this</span>.hit(<span class="hljs-string">'wall'</span>))) { <span class="hljs-comment">// check for collision with walls</span>
          hitData = hitDatas[<span class="hljs-number">0</span>]; <span class="hljs-comment">// resolving collision for just one collider</span>
          <span class="hljs-keyword">if</span> (hitData.type === <span class="hljs-string">'SAT'</span>) { <span class="hljs-comment">// SAT, advanced collision resolution</span>
            <span class="hljs-comment">// move player back by amount of overlap</span>
            <span class="hljs-keyword">this</span>.x -= hitData.overlap * hitData.normal.x;
            <span class="hljs-keyword">this</span>.y -= hitData.overlap * hitData.normal.y;
          } <span class="hljs-keyword">else</span> { <span class="hljs-comment">// MBR, simple collision resolution</span>
            <span class="hljs-comment">// move player to position before he moved (on respective axis)</span>
            <span class="hljs-keyword">this</span>[evt.axis] = evt.oldValue;
          }
        }
      });</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Crafty-map.html#Crafty-map-search">Crafty.map.search</a></li></ul></div></div><div class="doclet" id="-ignoreHits"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.ignoreHits()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L691-L721">src/spatial/collision.js#L691-L721</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.ignoreHits</span></span><span class="sig-seperator">()</span></code></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.ignoreHits</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">componentList</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> componentList </dt><dd><span class="markdown"><p>A comma separated list of components to stop checking for collisions with.</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.ignoreHits</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">component1</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">..</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String </span><span class="sig-noun">componentN</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> component# </dt><dd><span class="markdown"><p>A component to stop checking for collisions with.</p>
</span></dd></dl></div><span class="markdown"><p>Stops checking for collisions with all, or certain, components. If called
without arguments, this method will cause all collision checks on the
entity to cease. To disable checks for collisions with specific
components, specify the components as a comma separated string or as
a set of arguments.</p>
<p>Calling this method with component names for which there are no collision
checks has no effect.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs ">Crafty.e(<span class="hljs-string">"2D, Collision"</span>)
    .checkHits(<span class="hljs-string">'Solid'</span>)
    ...
    .ignoreHits(<span class="hljs-string">'Solid'</span>); <span class="hljs-comment">// stop checking for collisions with entities that have the Solid component</span></code></pre></span></div></div><div class="doclet" id="-onHit"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.onHit()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L538-L575">src/spatial/collision.js#L538-L575</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.onHit</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">component</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Function </span><span class="sig-noun">callbackOn</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Function </span><span class="sig-noun">callbackOff</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> component </dt><dd><span class="markdown"><p>Component to check collisions for.</p>
</span></dd></dl><dl class="parameter"><dt> callbackOn </dt><dd><span class="markdown"><p>Callback method to execute upon collision with the component.                     The first argument passed  will be the results of the collision check in the same format documented for <code>hit()</code>.                     The second argument passed will be a Boolean indicating whether the collision with a component occurs for the first time.</p>
</span></dd></dl><dl class="parameter"><dt> callbackOff </dt><dd><span class="markdown"><p>Callback method executed once as soon as collision stops.</p>
</span></dd></dl></div><span class="markdown"><p>Creates an EnterFrame event calling <code>.hit()</code> each frame.  When a collision is detected the <code>callbackOn</code> will be invoked.</p>
<p>Note that the <code>callbackOn</code> will be invoked every frame the collision is active, not just the first time the collision occurs.
Use the second argument passed to <code>callbackOn</code> to differentiate that, which will be <code>true</code> if it&#39;s the first time the collision occurs.</p>
<p>If you want more fine-grained control consider using <code>.checkHits()</code>, <code>.hit()</code> or even <code>Crafty.map.search()</code>.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><p>Respond to collisions between player and bullets.</p>
<pre><code class="hljs ">Crafty.e(<span class="hljs-string">"2D, Collision, player"</span>)
      .attr({ <span class="hljs-attr">health</span>: <span class="hljs-number">100</span> })
      .onHit(<span class="hljs-string">'bullet'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hitDatas</span>) </span>{ <span class="hljs-comment">// on collision with bullets</span>
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>, l = hitDatas.length; i &lt; l; ++i) { <span class="hljs-comment">// for each bullet hit</span>
          hitDatas[i].obj.destroy(); <span class="hljs-comment">// destroy the bullet</span>
          <span class="hljs-keyword">this</span>.health -= <span class="hljs-number">25</span>; <span class="hljs-comment">// player looses health</span>
          <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.health &lt;= <span class="hljs-number">0</span>) <span class="hljs-comment">// once player's health depletes</span>
            <span class="hljs-keyword">this</span>.destroy(); <span class="hljs-comment">// player dies</span>
        }
      });</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-checkHits">.checkHits</a></li><li><a href="#-hit">.hit</a></li><li><a href="Crafty-map.html#Crafty-map-search">Crafty.map.search</a></li></ul></div></div><div class="doclet" id="-resetHitChecks"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.resetHitChecks()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/spatial/collision.js#L754-L787">src/spatial/collision.js#L754-L787</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.resetHitChecks</span></span><span class="sig-seperator">()</span></code></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.resetHitChecks</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">componentList</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> componentList </dt><dd><span class="markdown"><p>A comma seperated list of components to re-check for collisions with.</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.resetHitChecks</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">component1</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">..</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String </span><span class="sig-noun">componentN</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> component# </dt><dd><span class="markdown"><p>A component to re-check for collisions with.</p>
</span></dd></dl></div><span class="markdown"><p>Causes collision events to be received for collisions that are already
taking place (normally, an additional event would not fire before said
collisions cease and happen another time).
If called without arguments, this method will cause all collision checks on the
entity to fire events once more. To re-check for collisions with specific
components, specify the components as a comma separated string or as
a set of arguments.</p>
<p>Calling this method with component names for which there are no collision
checks has no effect.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// this example fires the HitOn event each frame the collision with the Solid entity is active, instead of just the first time the collision occurs.</span>
Crafty.e(<span class="hljs-string">"2D, Collision"</span>)
    .checkHits(<span class="hljs-string">'Solid'</span>)
    .bind(<span class="hljs-string">"HitOn"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">hitData</span>) </span>{
        Crafty.log(<span class="hljs-string">"Collision with Solid entity was reported in this frame again!"</span>);
        <span class="hljs-keyword">this</span>.resetHitChecks(<span class="hljs-string">'Solid'</span>); <span class="hljs-comment">// fire the HitOn event in the next frame also, if the collision is still active.</span>
    })</code></pre></span></div></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="/images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="/images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="/images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="/">Home</a></li>
				<li><a href="/getting-started/">Getting started</a></li>
				<li><a href="/documentation/">Documentation</a></li>
				<li><a href="/api/">API</a></li>
				<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
				<li><a href="/components/">Modules</a></li>
				<li class="emph"><a href="/#install">Download</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
